<template>
	<div class="app">
		<div class="title">
			<!-- 搜素添加部分开始 -->
			<div class="search">
				<el-button type="primary" icon="el-icon-search" @click="addmore()">添加</el-button>
			</div>
			<!-- 搜素添加部分结束 -->

			<!-- 表格内容部分开始 -->
			<div class="tablelist">
				<el-table :data="tableData" border style="width: 100%" align="center">
					<el-table-column label="模板编号" align="center">
						<template slot-scope="scope">
							{{ scope.row.freightTemplateDO.id }}
						</template>
					</el-table-column>
					<el-table-column label="模板名称" width="180" align="center">
						<template slot-scope="scope">
							{{ scope.row.freightTemplateDO.templateName }}
						</template>
					</el-table-column>
					<el-table-column label="宝贝地址" align="center"> </el-table-column>
					<el-table-column label="发货期限" align="center">
						<template slot-scope="scope">
							{{ scope.row.freightTemplateDO.deliveryDeadline + "天" }}
						</template>
					</el-table-column>
					<el-table-column label="默认包邮门栏" align="center">
						<template slot-scope="scope">
							{{
                scope.row.freightTemplateDO.defaultFreePrice == 0
                  ? "包邮"
                  : scope.row.freightTemplateDO.defaultFreePrice == -100
                  ? "不包邮"
                  : "满" +
                    scope.row.freightTemplateDO.defaultFreePrice / 100 +
                    "元包邮"
              }}
						</template>
					</el-table-column>
					<el-table-column label="默认计费首次发货数量" align="center">
						<template slot-scope="scope">
							{{ scope.row.freightTemplateDO.defaultFirstNum + "件" }}
						</template>
					</el-table-column>
					<el-table-column label="默认计费首次发货价格" align="center">
						<template slot-scope="scope">
							{{ scope.row.freightTemplateDO.defaultFirstMoney / 100 + "元" }}
						</template>
					</el-table-column>
					<el-table-column label="默认计费续件数量" align="center">
						<template slot-scope="scope">
							{{ scope.row.freightTemplateDO.defaultContinueNum + "件" }}
						</template>
					</el-table-column>
					<el-table-column label="默认计费续费价格" align="center">
						<template slot-scope="scope">
							{{
                scope.row.freightTemplateDO.defaultContinueMoney / 100 + "元"
              }}
						</template>
					</el-table-column>
					<el-table-column label="指定地区数量" align="center">
						<template slot-scope="scope">
							{{ scope.row.freightTemplateCarriageDOList.length }}
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="250">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="editor(scope.$index, scope.row)">修改</el-button>
							<el-button size="mini" type="danger" @click="Delete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 表格内容部分结束 -->

				<!-- 添加和编辑部分开始 -->
				<el-dialog :title="bools ? '创建' : '编辑'" :visible.sync="dialogFormVisible" fullscreen>
					<el-form :model="form" :rules="rules" ref="form" label-width="100px">
						<el-form-item prop="templateName" label="模板名称" :label-width="formLabelWidth">
							<el-input v-model="form.templateName" autocomplete="off" class="DialogInput" clearable></el-input>
						</el-form-item>
						<el-form-item prop="deliveryDddress" label="发货地址" :label-width="formLabelWidth">
							<el-input v-model="form.deliveryDddress" autocomplete="off" class="DialogInput" clearable></el-input>
						</el-form-item>
						<el-form-item prop="defaultFreePrice" label="发货期限" :label-width="formLabelWidth">
							<el-input v-model="form.defaultFreePrice" autocomplete="off" class="DialogInput" clearable>
								<template slot="append">天</template>
							</el-input>
						</el-form-item>
						<el-form-item prop="PackageMail" label="是否包邮" :label-width="formLabelWidth">
							<template>
								<el-radio-group v-model="radio">
									<el-radio :label="1">坚决不包邮</el-radio>
									<el-radio :label="2">卖家承担包邮</el-radio>
									<el-radio :label="3">设定满额包邮</el-radio>
								</el-radio-group>
							</template>
						</el-form-item>
						<el-form-item v-if="radio == 3" label="默认包邮额度" prop="Packagelines" :label-width="formLabelWidth">
							<el-input v-model="form.Packagelines" autocomplete="off" class="DialogInput" clearable>
								<template slot="append">
									<span style="padding-right: 5px">元</span>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item v-if="radio == 1 || radio == 3" label="计费首次数量" prop="firstcostnum"
						 :label-width="formLabelWidth">
							<el-input v-model="form.firstcostnum" autocomplete="off" class="DialogInput" clearable>
								<template slot="append">
									<span style="padding-right: 5px">件</span>
									<el-tooltip class="item" effect="dark" content="当用户购买商品数量小于 ‘这个数’ 就支付默认首次发货价格的运费" placement="top-start">
										<i class="el-icon-question"></i>
									</el-tooltip>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item v-if="radio == 1 || radio == 3" label="计费首次价格" prop="firstcostprice"
						 :label-width="formLabelWidth">
							<el-input v-model="form.firstcostprice" autocomplete="off" class="DialogInput" clearable>
								<template slot="append">
									<span style="padding-right: 5px">元</span>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item v-if="radio == 1 ||radio == 3" label="计费续件数量" prop="secondcostnum"
						 :label-width="formLabelWidth">
							<el-input v-model="form.secondcostnum" autocomplete="off" class="DialogInput" clearable>
								<template slot="append">
									<span style="padding-right: 5px">件</span>
									<el-tooltip class="item" effect="dark" content="当用户购买数量高于 ‘首次发货数量’ 每多 N 件，就须额外支付 ‘续件价格’" placement="top-start">
										<i class="el-icon-question"></i>
									</el-tooltip>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item v-if="radio == 1 || radio == 3" label="计费续件价格" prop="secondcostprice"
						 :label-width="formLabelWidth">
							<el-input v-model="form.secondcostprice" autocomplete="off" class="DialogInput" clearable>
								<template slot="append">
									<span style="padding-right: 5px">元</span>
									<el-tooltip class="item" effect="dark" content="若不需要计件额外算运费，则直接填0即可" placement="top-start">
										<i class="el-icon-question"></i>
									</el-tooltip>
								</template>
							</el-input>
						</el-form-item>
						<!-- 弹框内的点击添加部分开始 -->
						<el-form-item v-if="
                radio == 1 ||
                radio == 2 ||
                radio == 3
              "
						 label="指定地区价格" prop="secondcostprice" :label-width="formLabelWidth">
							<el-row>
								<el-button type="primary" @click="adderea()">添加</el-button>
							</el-row>
							<el-table :data="gridData" width="980">
								<el-table-column prop="tableprovinces" label="指定省份" width="150"></el-table-column>
								<el-table-column prop="tablenum" label="首次数量" width="200"></el-table-column>
								<el-table-column prop="tableprice" label="首次价格"></el-table-column>
								<el-table-column prop="tableconnum" label="续件数量"></el-table-column>
								<el-table-column prop="tableconprice" label="续件价格"></el-table-column>
								<el-table-column prop="tablefullpackge" label="满额包邮门槛"></el-table-column>
								<el-table-column prop="" label="操作">
									<template slot-scope="scope">
										<el-button size="mini" type="danger" @click="ereaDelete(scope.$index, scope.row)">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-form-item>
						<!-- 弹框内的点击添加部分结束 -->
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="closeing('form')">取 消</el-button>
						<el-button type="primary" @click="makesure('form')">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 添加和编辑部分结束 -->

				<!-- 点击添加指定地区部分开始 -->
				<el-dialog title="添加指定地区" :visible.sync="dialogTableVisible">
					<el-form :model="ruleForm" :rules="cityrules" ref="ruleForm" label-width="100px">
						<el-form-item prop="threshold" label="包邮门槛">
							<el-input v-model="ruleForm.threshold" clearable></el-input>
						</el-form-item>
						<el-form-item prop="cityfirstnum" label="首次数量">
							<el-input v-model="ruleForm.cityfirstnum" clearable></el-input>
						</el-form-item>
						<el-form-item prop="cityfirstprice" label="首次价格">
							<el-input v-model="ruleForm.cityfirstprice" clearable></el-input>
						</el-form-item>
						<el-form-item prop="cityconnum" label="续件数量">
							<el-input v-model="ruleForm.cityconnum" clearable></el-input>
						</el-form-item>
						<el-form-item prop="cityconprice" label="续件价格">
							<el-input v-model="ruleForm.cityconprice" clearable></el-input>
						</el-form-item>
						<el-form-item prop="" label="指定地区">
							<template>
								<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
									<el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
								</el-checkbox-group>
							</template>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="cancel('form')">取 消</el-button>
						<el-button type="primary" @click="clicksure('form')">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 点击添加指定地区部分结束 -->
			</div>
		</div>
	</div>
</template>



<script>
	import {
		renderinglist,
		deletelist,
		addlist,
		Modifylist
	} from "../encapsulation/FreightTemplate";
	const cityOptions = [
		"北京市",
		"天津市",
		"河北省",
		"山西省",
		"内蒙古自治区",
		"辽宁省",
		"吉林省",
		"黑龙江省",
		"上海市",
		"江苏省",
		"浙江省",
		"安徽省",
		"福建省",
		"江西省",
		"山东省",
		"河南省",
		"湖北省",
		"湖南省",
		"广东省",
		"广西壮族自治区",
		"海南省",
		"重庆市",
		"四川省",
		"贵州省",
		"云南省",
		"西藏自治区",
		"陕西省",
		"甘肃省",
		"青海省",
		"宁夏回族自治区",
		"新疆维吾尔自治区",
		"台湾省",
		"香港特别行政区",
		"澳门特别行政区",
	];
	export default {
		data() {
			return {
        checkAll: false,
        citytable:[], //城市数组
				checkedCities: [], //城市表格默认选择
				cities: cityOptions, //当前变量接收城市表格
				isIndeterminate: true,
				tableData: [], //表格内容
				dialogFormVisible: false, //点击隐藏添加对话框
				dialogTableVisible: false, //点击指定地区的弹框
				formLabelWidth: "120px", //控制label的宽度
				bools: true, //判断弹框的布尔值
				radio:3, //是否包邮的默认选择哪个
				gridData: [], //弹框内的点击添加表格
				form: {
					templateName: "", //模板名称
					deliveryDddress: "", //发货地址
					defaultFreePrice: "", //发货期限
					// PackageMail: 3, //是否包邮
					firstcostnum: "", //计费首次数量
					Packagelines: "", //默认包邮额度
					firstcostprice: "", //计费首次价格
					secondcostnum: "", //计费续件数量
					secondcostprice: "", //计费续件价格
				},
				rules: {
					templateName: [{
						required: true,
						message: "模板名称不能为空",
					}, ],
					deliveryDddress: [{
						required: true,
						message: "发货地址不能为空",
					}, ],
					defaultFreePrice: [{
						required: true,
						message: "发货期限不能为空",
					}, ],
					firstcostnum: [{
						required: true,
						message: "计费首次数量不能为空",
					}, ],
					Packagelines: [{
						required: true,
						message: "默认包邮额度不能为空",
					}, ],
					firstcostprice: [{
							required: true,
							message: "计费首次价格不能为空",
						},
						{
							// pattern:/^\+?[0-9]\d*s/
						},
					],
					secondcostnum: [{
							required: true,
							message: "计费续件数量不能为空",
						},
						{
							// pattern:'/^[+]{0,1}(\d+)',
						},
					],
					secondcostprice: [{
						required: true,
						message: "计费续件价格不能为空",
					}, ],
				},
				ruleForm: {
					threshold: "", //包邮门槛
					cityfirstnum: "", //首发数量
					cityfitstprice: "", //首发价格
					cityconnum: "", //续件数量
					cityconprice: "", //续件价格
				},
				cityrules: {
					threshold: [{
							required: true,
							message: "包邮门槛不能为空",
						},
						{
							integer: "^[0-9]*[1-9][0-9]*$",
							message: "请输入整数",
						}
					],
					cityfirstnum: [{
						required: true,
						message: "首次数量不能为空",
					}, ],
					cityfirstprice: [{
						required: true,
						message: "首次价格不能为空",
					}, ],
					cityconnum: [{
						required: true,
						message: "续件数量不能为空",
					}, ],
					cityconprice: [{
						required: true,
						message: "续件价格不能为空",
					}, ],
				},
			};
		},
		methods: {
			//   表格数据渲染
			getlist() {
				renderinglist().then((res) => {
					this.tableData = res.data.data;
				});
			},
			//添加&编辑
			makesure(form) {
				let _this = this;
				if (_this.bools) {
					// 点击添加
					_this.$refs[form].validate((valid) => {
						if (valid) {
							let data = {
								templateName: _this.form.templateName, //模板名称
								deliveryDeadline: _this.form.defaultFreePrice, //发货期限
								defaultFreePrice: _this.form.radio, //默认满价包邮
								defaultFirstNum: _this.form.firstcostnum, //默首件数量
								defaultFirstPrice: _this.form.firstcostprice, //默认首费
								defaultContinueNum: _this.form.secondcostnum, //默认续费
								defaultContinuePrice: _this.form.secondcostprice, //默认续件价格
								spuLocation: _this.deliveryDddress, //发货地址
								// freightTemplateCarriageDOList:this.
							};
							addlist(data).then((res) => {
								if (res.data.errmsg === "系统未知异常") {
									_this.$message.error("模板已存在！");
								}
								if (res.data.errmsg === "成功") {
									(_this.dialogFormVisible = false);
									_this.$message.success({
										message: "添加成功",
									});
									_this.getlist();
								}
								_this.$refs[form].resetFields();
							});
						} else {
							console.log("error submit!!");
							return false;
						}
					});
				} else {
					// 编辑
					let data = {
						templateId: this.form.id,
						templateName: _this.form.templateName, //模板名称
						deliveryDeadline: _this.form.defaultFreePrice, //发货期限
						defaultFreePrice: _this.form.radio, //默认满价包邮
						defaultFirstNum: _this.form.firstcostnum, //默首件数量
						defaultFirstPrice: _this.form.firstcostprice, //默认首费
						defaultContinueNum: _this.form.secondcostnum, //默认续费
						defaultContinuePrice: _this.form.secondcostprice, //默认续件价格
						spuLocation: _this.form.deliveryDddress, //发货地址
						// freightTemplateCarriageDOList:[]
					};
					Modifylist(data).then(() => {
						_this.$message.success({
							message: "更新成功",
						});
						_this.getlist();
						_this.dialogFormVisible = false;
						_this.$refs[form].resetFields();
					});
				}
			},
			//点击取消
			closeing(formName) {
				this.dialogFormVisible = false;
				this.$refs[formName].resetFields();
			},
			// 指定地区取消
			cancel() {
        this.dialogTableVisible = false;
			},
			// 点击添加弹框
			addmore() {
				this.bools = true;
				this.dialogFormVisible = true;
				this.form.templateName=='', //模板名称
				this.form.defaultFreePrice='', //发货期限
				this.form.radio='', //默认满价包邮
				this.form.firstcostnum='', //默首件数量
				this.form.firstcostprice='', //默认首费
				this.form.secondcostnum='', //默认续费
				this.form.secondcostprice='', //默认续件价格
				this.deliveryDddress='' //发货地址

			},
			// 点击编辑弹框
			editor(index, row) {
				this.bools = false;
				this.dialogFormVisible = true;
				this.form.id = row.freightTemplateDO.id
				this.form.templateName = row.freightTemplateDO.templateName, //模板名称  
				this.form.defaultFreePrice = row.freightTemplateDO.deliveryDeadline, //发货期限 
				this.form.radio = row.freightTemplateDO.defaultFreePrice, //默认满价包邮 
				this.form.firstcostnum = row.freightTemplateDO.defaultFirstNum, //默首件数量 
				this.form.firstcostprice = row.freightTemplateDO.defaultFirstMoney, //默认首费 
				this.form.secondcostnum = row.freightTemplateDO.defaultContinueNum, //默认续费 
				this.form.secondcostprice = row.defaultContinueMoney, //默认续件价格
				this.deliveryDddress = row.spuLocation //发货地址 un
				// freightTemplateCarriageDOList=[]
			},
			//点击指定地区添加
			adderea() {
            this.dialogTableVisible = true;
            // this.ruleForm.id='',
            // this.checkedCities='',
			      // this.ruleForm.threshold='', //包邮门栏
			      // this.ruleForm.cityfirstnum='', //首次数量
			      // this.ruleForm.cityfirstprice='', //首次价格
			      // this.ruleForm.cityconnum='', //续件数量
			      // this.ruleForm.cityconprice='' //续件价格
			},
			// 指定地区城市
			handleCheckAllChange(val) {
				this.checkedCities = val ? cityOptions : [];
				this.isIndeterminate = false;
			},
			handleCheckedCitiesChange(value) {
				// let region = value
				let checkedCount = value.length;
				this.checkAll = checkedCount === this.cities.length;
				this.isIndeterminate =
					checkedCount > 0 && checkedCount < this.cities.length;
			},
			// 指定地区城市点击添加
			clicksure(formName){
			  // let json = this.region
			  // let num = ""
			  // for(var key in json){
			  //   num +=json[key]+','
			  // }
			  // num = num.substring(0,num.length-1)
			  let arr = {
			      id: this.ruleForm.id,
			      tableprovinces: this.checkedCities, //指定省份
			      tablefullpackge: this.ruleForm.threshold, //包邮门栏
			      tablenum: this.ruleForm.cityfirstnum, //首次数量
			      tableprice: this.ruleForm.cityfirstprice/100,//首次价格
			      tableconnum: this.ruleForm.cityconnum, //续件数量
			      tableconprice: this.ruleForm.cityconprice, //续件价格
			  }
          this.gridData.push(arr)
          this.dialogTableVisible = false;
          this.$refs[formName].resetFields();
			},
			// 删除
			Delete(index, row) {
				let _this = this;
				let data = {
					templateId: row.freightTemplateDO.id,
				};
				_this
					.$confirm(
						"此操作将永久删除该运费模板---" + row.freightTemplateDO.templateName + "---, 是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning",
						}
					)
					.then(() => {
						deletelist(data).then(() => {
							_this.tableData.splice(index, 1);
							this.$message.success({
								message: "删除成功",
							});
						});
					})
					.catch(() => {
						this.$message.info("您已取消删除");
					});
      },
      // 表格删除
      ereaDelete(index){
          this.$confirm(
						"此操作将永久删除该指定地区,是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning",
						}
					).then(() => {
							this.gridData.splice(index, 1);
							this.$message.success({
								message: "删除成功",
							});
					})
      }
		},
		created() {
			this.getlist();
		},
	};
</script>
<style scoped lang="less">
	.app {
		padding: 20px;
		height: 100%;
		overflow: hidden !important;
		position: relative;
	}

	.title {
		position: absolute;
		left: 0;
		top: 0;
		right: -17px;
		bottom: 0;
		overflow-x: hidden;
		overflow-y: scroll;
		padding: 20px;
	}

	.tablelist {
		margin-top: 20px;
	}

	.el-table {
		font-size: 12px;
	}

	.el-form/deep/.el-input {
		width: 550px;
	}

	.item {
		margin: 2px;
	}

	.left .el-tooltip__popper,
	.right .el-tooltip__popper {
		padding: 8px 5px;
	}
</style>
